<template>
    <div class="bac">
        <!-- 版心 -->
        <div class="container">
            <van-cell-group>
                <van-form @submit="onSubmit" validate-first @onfailed="onFailed">
                    <h1 class="zhuce-font">注册</h1>
                    <van-field v-model="formData.u_name" name="用户名" left-icon="./img/icon/my.png" placeholder="请填写用户名"
                        :rules="[{ required: true, message: '用户名不能为空' }]" />

                    <van-field v-model="formData.u_email" name="邮箱" left-icon="./img/icon/email.png" placeholder="请填写邮箱"
                        :rules="[{ required: true, message: '邮箱不能为空' }, { validator, message: ' 邮箱格式错误' }, { validator: asyncValidatorEmail, message: '该邮箱已被注册' }]" />

                    <van-field v-model="formData.u_pwd" type="password" name="密码" left-icon="./img/icon/pwd.png"
                        placeholder="请填写密码" :rules="[{ required: true, message: '密码不能为空' }]" />

                    <van-field v-model="formData.u_code" type="text" name="邮箱验证码" left-icon="./img/icon/yzm.png"
                        placeholder="填写验证码"
                        :rules="[{ required: true, message: '验证码不能为空' }, { validator: asyncValidatorCode, message: '验证码错误' }]">
                        <template #button>
                            <van-button type="primary" size="small" style="width:8rem" native-type="button"
                                @click="sendCode" v-if="sendBtnMsg == '发送验证码'">{{ sendBtnMsg
                                }}</van-button>
                            <van-button type="primary" size="small" style="width:8rem" native-type="button"
                                @click="sendCode" v-else disabled>{{ sendBtnMsg
                                }}</van-button>
                        </template>
                    </van-field>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit" style="margin-bottom: 1rem;">注册</van-button>
                        <van-button round block type="info" @click="jump">登录</van-button>
                    </div>
                </van-form>
            </van-cell-group>
            <!-- 其他登陆方式 -->
            <div class="zdy-botton">
                <!-- 分割线 -->
                <van-divider style="margin:1rem 0">其他登陆方式</van-divider>
                <van-grid :border="false" :column-num="3" icon-size="3rem" direction="horizontal">
                    <van-grid-item icon="./img/icon/qq.png" text="QQ" />
                    <van-grid-item icon="./img/icon/weibo.png" text="微博" />
                    <van-grid-item icon="./img/icon/chat.png" text="微信" />
                </van-grid>
            </div>
        </div>
        <!-- 登录表单 -->
    </div>
</template>

<script>

export default {
    data() {
        return {
            sendBtnMsg: "发送验证码",
            state: true,
            formData: {
                u_name: "",
                u_email: "",
                u_code: "",
                u_pwd: ""
            },
            timer: null
        };
    },
    methods: {
        // 发送验证码
        sendCode() {
            let time = 5 //30s
            console.log(this.state);
            if (this.formData.u_email) {
                new Promise(resolve => {
                    clearInterval(this.timer)
                    this.timer = setInterval(() => {
                        if (time > 0) {
                            this.sendBtnMsg = time + "秒"
                            time--
                        } else {
                            this.sendBtnMsg = "发送验证码"
                        }
                        resolve("发送验证码")
                    }, 1000)
                }).then(res => {
                    this.sendBtnMsg = res
                })
                // 获取验证码
                this.$axios.post(this.$api.sendCode, { email: this.formData.u_email }).then(res => {
                    console.log("发送验证码返回", res);
                    return res.data
                }).then(res => {
                    if (res.code == 200) {
                        this.$toast.success("发送成功")
                    } else {
                        this.$toast.fail("发送失败")
                    }
                })
            } else {
                this.$toast.fail("邮箱不得为空")
            }
        },
        jump() {
            this.$router.replace("/login")
        },
        // 注册
        onSubmit(values) {
            console.log('submit', values);
            // 校验验证码
            this.$axios.post(this.$api.register, this.formData).then(res => {
                return res.data
            }).then(res => {
                if (res.code == 200) {
                    this.$toast.success(res.msg)
                    this.$router.replace("/login")
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
        // 校验邮箱格式
        validator(val) {
            return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val);
        },
        // 异步校验邮箱唯一性
        asyncValidatorEmail(email) {
            let that = this
            return new Promise((resolve) => {
                that.$axios.post(that.$api.checkEmail, { email }).then(res => {
                    console.log("唯一性校验返回", res);
                    if (res?.data?.code == 200) {
                        resolve(true)
                    } else {
                        resolve(false)
                        this.state = false
                    }
                    resolve(res)
                })
            });
        },
        // 异步校验验证码是否正确
        asyncValidatorCode(code) {
            let that = this
            return new Promise((resolve) => {
                that.$axios.post(that.$api.checkCode, { email: this.formData.u_email, code }).then(res => {
                    console.log("验证码校验返回", res);
                    if (res?.data?.code == 200) {
                        resolve(true)
                    } else {
                        resolve(false)
                    }
                    resolve(res)
                })
            });
        },
    },
}
</script>

<style scoped>
.bac {
    display: flex;
    height: 100vh;
    background: url("/public/img/background/reg_bg.jpg");
    background-color: #f7f7f7;
    background-size: 100vw 25rem;
    background-repeat: no-repeat;
}

.van-cell-group {
    border-radius: 1rem;
    border: none;
    padding: 4rem;
    /* margin-top: 1rem; */
    /* clear: both; */
}

.zdy-bottom {
    background-color: #f7f7f7;
}

.van-button--primary {
    background-color: #fecb1c;
    border: none;
}

.van-button--info {
    background-color: #e0d7d7;
    border: none;
}

.van-field__control,
.van-field__error-message {
    padding-left: 3rem;
    padding-right: 1rem;
}

.van-cell {
    display: flex;
    align-items: center;
}

.container {
    width: 34rem;
    margin: 1rem auto;
    margin-top: 10rem;
}

.zhuce-font {
    font-size: 1.6rem;
    color: #fecb1c;
    text-align: center;
    margin-bottom: 1rem;
    padding-top: 1rem;
}

.van-form {
    background-color: #f7f7f7;
    padding: 2rem;
}

/* .van-grid-item__content {
    @grid-item-content-background-color: #f7f7f7
} */
</style>
